import React, { useEffect, useState, useRef } from 'react';
import { Search, Menu, X } from 'lucide-react';
import { Link, useNavigate } from 'react-router-dom';
import { SearchDropdown } from './SearchDropdown';
import './search-animations.css';
export function Header() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');
  const [showSearchInput, setShowSearchInput] = useState(false);
  const [showSearchResults, setShowSearchResults] = useState(false);
  const [searchAnimationClass, setSearchAnimationClass] = useState('');
  const [searchIconClass, setSearchIconClass] = useState('');
  const searchInputRef = useRef<HTMLInputElement>(null);
  const searchContainerRef = useRef<HTMLDivElement>(null);
  const navigate = useNavigate();
  // Close search results when clicking outside
  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (searchContainerRef.current && !searchContainerRef.current.contains(event.target as Node)) {
        setShowSearchResults(false);
      }
    }
    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);
  // Focus input when search is opened
  useEffect(() => {
    if (showSearchInput && searchInputRef.current) {
      searchInputRef.current.focus();
    }
  }, [showSearchInput]);
  const handleSearchClick = () => {
    setSearchIconClass('search-icon-spin');
    setSearchAnimationClass('search-enter');
    setShowSearchInput(true);
    setTimeout(() => setSearchIconClass(''), 300);
  };
  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchQuery(e.target.value);
    if (e.target.value.length > 0) {
      setShowSearchResults(true);
    } else {
      setShowSearchResults(false);
    }
  };
  const handleSearchSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (searchQuery.trim()) {
      setShowSearchResults(false);
      setSearchAnimationClass('search-exit');
      setTimeout(() => {
        setShowSearchInput(false);
        setSearchAnimationClass('');
      }, 300);
      navigate(`/search?q=${encodeURIComponent(searchQuery.trim())}`);
      setSearchQuery('');
    }
  };
  const closeSearch = () => {
    setSearchAnimationClass('search-exit');
    setShowSearchResults(false);
    setTimeout(() => {
      setShowSearchInput(false);
      setSearchQuery('');
      setSearchAnimationClass('');
    }, 300);
  };
  return <header className="w-full bg-[#f8f5f0] py-6 px-4 md:px-8 lg:px-12 sticky top-0 z-50 border-b border-[#e8e5e0]">
      <div className="max-w-7xl mx-auto flex items-center justify-between">
        <div className="flex items-center">
          <Link to="/" className="text-2xl md:text-3xl font-serif font-light tracking-wider text-[#4a6b60]">
            RitualGlow
          </Link>
        </div>
        {/* Desktop Navigation */}
        <nav className="hidden md:flex items-center space-x-8">
          <Link to="/" className="text-sm tracking-wide hover:text-[#4a6b60] transition-colors">
            Home
          </Link>
          <Link to="/skincare" className="text-sm tracking-wide hover:text-[#4a6b60] transition-colors">
            Skincare
          </Link>
          <Link to="/makeup" className="text-sm tracking-wide hover:text-[#4a6b60] transition-colors">
            Makeup
          </Link>
          <Link to="/wellness" className="text-sm tracking-wide hover:text-[#4a6b60] transition-colors">
            Wellness
          </Link>
          <Link to="/the-ritual" className="text-sm tracking-wide hover:text-[#4a6b60] transition-colors">
            The Ritual
          </Link>
          <div className="relative">
            <Link to="/about/our-story" className="text-sm tracking-wide hover:text-[#4a6b60] transition-colors">
              About
            </Link>
          </div>
          <div ref={searchContainerRef} className="relative">
            {showSearchInput ? (
              <div className={`absolute left-0 top-[-10px] flex items-center bg-white rounded-xl shadow-lg border border-[#e8e5e0] overflow-hidden transform -translate-x-full ${searchAnimationClass}`}>
                <form onSubmit={handleSearchSubmit} className="flex">
                  <input
                    ref={searchInputRef}
                    type="text"
                    value={searchQuery}
                    onChange={handleSearchChange}
                    placeholder="Search products, categories..."
                    className="py-3 px-4 w-72 text-sm focus:outline-none placeholder-[#888888]"
                  />
                  <button
                    type="submit"
                    className="p-3 bg-gradient-to-r from-[#4a6b60] to-[#3d5a50] text-white hover:from-[#3d5a50] hover:to-[#2f463b] transition-all duration-200"
                  >
                    <Search size={18} />
                  </button>
                </form>
                <button
                  onClick={closeSearch}
                  className="p-3 text-[#888888] hover:text-[#4a4a4a] hover:bg-[#f8f5f0] transition-colors duration-200"
                >
                  <X size={18} />
                </button>
                {showSearchResults && <SearchDropdown query={searchQuery} />}
              </div>
            ) : (
              <button
                aria-label="Search"
                className="p-2 hover:bg-[#f3f0eb] rounded-lg transition-colors duration-200"
                onClick={handleSearchClick}
              >
                <Search size={18} className={searchIconClass} />
              </button>
            )}
          </div>
        </nav>
        {/* Mobile Navigation */}
        <div className="flex items-center md:hidden">
          <div ref={searchContainerRef} className="relative">
            {showSearchInput ? (
              <div className={`absolute left-0 top-[-10px] flex items-center bg-white rounded-xl shadow-lg border border-[#e8e5e0] overflow-hidden transform -translate-x-full ${searchAnimationClass}`}>
                <form onSubmit={handleSearchSubmit} className="flex">
                  <input
                    ref={searchInputRef}
                    type="text"
                    value={searchQuery}
                    onChange={handleSearchChange}
                    placeholder="Search..."
                    className="py-3 px-4 w-64 text-sm focus:outline-none placeholder-[#888888]"
                  />
                  <button
                    type="submit"
                    className="p-3 bg-gradient-to-r from-[#4a6b60] to-[#3d5a50] text-white hover:from-[#3d5a50] hover:to-[#2f463b] transition-all duration-200"
                  >
                    <Search size={18} />
                  </button>
                </form>
                <button
                  onClick={closeSearch}
                  className="p-3 text-[#888888] hover:text-[#4a4a4a] hover:bg-[#f8f5f0] transition-colors duration-200"
                >
                  <X size={18} />
                </button>
                {showSearchResults && <SearchDropdown query={searchQuery} />}
              </div>
            ) : (
              <button
                aria-label="Search"
                className="p-2 mr-2 hover:bg-[#f3f0eb] rounded-lg transition-colors duration-200"
                onClick={handleSearchClick}
              >
                <Search size={18} className={searchIconClass} />
              </button>
            )}
          </div>
          <button aria-label="Menu" className="p-2" onClick={() => setIsMenuOpen(!isMenuOpen)}>
            {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
          </button>
        </div>
      </div>
      {/* Mobile Menu */}
      {isMenuOpen && <div className="fixed inset-0 bg-[#f8f5f0] pt-20 px-6 z-40">
          <nav className="flex flex-col space-y-6">
            <Link to="/" className="text-lg font-medium hover:text-[#4a6b60] transition-colors" onClick={() => setIsMenuOpen(false)}>
              Home
            </Link>
            <Link to="/skincare" className="text-lg font-medium hover:text-[#4a6b60] transition-colors" onClick={() => setIsMenuOpen(false)}>
              Skincare
            </Link>
            <Link to="/makeup" className="text-lg font-medium hover:text-[#4a6b60] transition-colors" onClick={() => setIsMenuOpen(false)}>
              Makeup
            </Link>
            <Link to="/wellness" className="text-lg font-medium hover:text-[#4a6b60] transition-colors" onClick={() => setIsMenuOpen(false)}>
              Wellness
            </Link>
            <Link to="/the-ritual" className="text-lg font-medium hover:text-[#4a6b60] transition-colors" onClick={() => setIsMenuOpen(false)}>
              The Ritual
            </Link>
            <div className="space-y-4 pl-4 border-l border-[#e8e5e0]">
              <h3 className="text-lg font-medium">About</h3>
              <Link to="/about/our-story" className="block text-base hover:text-[#4a6b60] transition-colors" onClick={() => setIsMenuOpen(false)}>
                Our Story
              </Link>
              <Link to="/about/our-values" className="block text-base hover:text-[#4a6b60] transition-colors" onClick={() => setIsMenuOpen(false)}>
                Our Values
              </Link>
              <Link to="/about/contact" className="block text-base hover:text-[#4a6b60] transition-colors" onClick={() => setIsMenuOpen(false)}>
                Contact Us
              </Link>
              <Link to="/about/privacy-policy" className="block text-base hover:text-[#4a6b60] transition-colors" onClick={() => setIsMenuOpen(false)}>
                Privacy Policy
              </Link>
            </div>
          </nav>
        </div>}
    </header>;
}